.<template>
  <div v-if="axiosData">
    <personTop headline="编辑资料"></personTop>
    <div class="portrait">
      <label>
        <van-uploader :after-read="setPortrait" v-show="false" />
        <img v-if="axiosData.head_img" :src="'http://liangwei.tech:3000'+axiosData.head_img" alt />
        <img v-else src="../../assets/54ecb5b94bd0c78011cbaf9a593b48c8.png" alt />
      </label>
    </div>
    <PerBar barMe="昵称" :barRight="axiosData.nickname" @barClick="isShowNickname=true"></PerBar>
    <PerBar barMe="密码" barRight="*******" @barClick="isShowPassword=true"></PerBar>
    <!-- 动态用radioGender axios接受后赋值 然后这边判断男女 -->
    <PerBar barMe="性别" :barRight="axiosData.gender==1?'男':'女'" @barClick="isShowGender=true "></PerBar>
    <!-- 弹出昵称 密码组件 -->
    <van-dialog
      v-model="isShowNickname"
      title="修改昵称"
      @confirm="axiosUpdate({nickname:valueNickname})"
    >
      <van-field v-model="valueNickname" />
    </van-dialog>
    <van-dialog
      v-model="isShowPassword"
      title="修改密码"
      @confirm="axiosUpdate({password:valuePassword})"
    >
      <van-field v-model="valuePassword" type="password" />
    </van-dialog>
    <!-- 性别选择组件 -->
    <!-- -- -->
    <van-action-sheet v-model="isShowGender" :actions="genderArr" @select="onGenderSelect" />
  </div>
</template>

<script>
import personTop from "../../components/personTop";
import PerBar from "../../components/PerBar";
export default {
  components: {
    personTop,
    PerBar
  },
  mounted() {
    this.$axios({
      url: "/user/" + localStorage.getItem("user_id"),
      method: "get",
      headers: {
        Authorization: localStorage.getItem("token")
      }
    }).then(res => {
      this.axiosData = res.data.data;
      // this.valueNickname = res.data.data.nickname;
      // this.radioGender = res.data.data.gender;
      // this.valuePassword = res.data.data.password;
    });
  },
  data() {
    return {
      axiosData: null,
      isShowNickname: false,
      isShowPassword: false,
      isShowGender: false,
      valueNickname: "",
      valuePassword: "",
      genderArr: [{ name: "男" }, { name: "女" }]
    };
  },
  methods: {
    //设置头像
    setPortrait(fileObj) {
      const imgRegExp = /\w(\.gif|\.jpeg|\.png|\.jpg|\.bmp)/i;
      const file = fileObj.file;
      const isok = imgRegExp.test(file.name);
      if (isok) {
        const formData = new FormData();
        formData.append("file", file);
        //1
        this.axiosUpdate(formData, "/upload", false).then(res => {
          const { url } = res.data.data;
          // 2
          this.axiosUpdate({ head_img: url }).then(res => {});
        });
      } else {
        console.log("失败");
      }
    },
    //ajax封装
    axiosUpdate(
      newdata,
      url = "/user_update/" + localStorage.getItem("user_id"),
      flush = true
    ) {
      // console.log(newdata);
      return this.$axios({
        url: url,
        method: "post",
        headers: {
          Authorization: localStorage.getItem("token")
        },
        data: newdata
      })
        .then(res => {
          // console.log(res);
          if (flush) {
            this.$router.go(0);
          }
          return res;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //性别函数
    onGenderSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      const { name } = item;

      this.axiosUpdate({
        gender: name == 1 ? 1 : 2
      });
      this.show = false;
    }
  }
};
</script>

<style lang="less" scoped>
.portrait {
  padding-top: 4vw;
  display: flex;
  justify-content: center;
  img {
    width: 26.667vw;
    border-radius: 50%;
    border: 1px solid #000;
  }
}
</style>